<template>
  <div class="qualityOutOperationTask">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">出库质检任务</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="success" size="mini" @click="dialogOpen(s.row)" v-if="s.row.ckrwzt === 0">生成</el-button>
            <el-button type="info" size="mini" @click="dialogSearchOpen(s.row)" >查看</el-button>
          </template>
        </el-table-column>
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="名称" prop="gysmc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_gysmc"
                        placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="ASN编号" prop="asnbh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_asnbh"
                        placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="质检单号" prop="zjdh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_zjdh"
                        placeholder="质检单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="任务状态" prop="ckrwzt">
              <el-select v-model="autoVue_table_ckrwzt"
                         placeholder="任务状态">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  v-for="item in QUALITYOUTOPERATIONTASK.ckrwzt"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}出库质检任务</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="account" label="账户类型">
              <el-select v-model="formDialog.account" placeholder="请选择">
                <el-option
                  v-for="item in SHELVESTASK.account"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="ryid" label="人员">
              <el-select v-model="formDialog.ryid"
                         filterable
                         @change="dialogRemoteryid"
                         placeholder="请输入人员名称">
                <el-option
                  v-for="item in dialog.wmsqualityinspectionlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogInit">
      <p slot="title">{{dialogSearch.title}}出库质检任务详情</p>
      <s-table :table="tableSearch" ref="tableSearch" @http="tableWatch" :control=false>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="dialogClickOpen(s.row)" >查看</el-button>
          </template>
        </el-table-column>
      </s-table>
    </s-dialog>
    <s-dialog :dialog="dialogClick">
      <p slot="title">{{dialogClick.title}}</p>
      <s-table :table="tableClick" ref="tableClick" @http="tableWatch"></s-table>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';
  function __form () {
    return {
      account: { value: '', rule: [ 'vNull__change' ] },
      ryid: { value: '', rule: [ 'vNull__change' ] },
    };
  }
  export default AutoVue({
    name: 'task_qualityOutOperationTask-FEcarWms',
    head: {
      'title': '出库质检管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 出库质检 查看出库质检信息' },
      ],
    },
    store: ['USER', 'QUALITYOUTOPERATIONTASK', 'DICTIONARY_qualityOutOperationTask', 'SHELVESTASK', 'DICTIONARY_shelvestask'],
    data: {
      table: {
        column: [
          { label: '仓库',
            prop: 'ckmc',
            minWidth: '0px',
            search: false,
          },
          { label: '货主',
            prop: 'ownerMc',
            minWidth: '0px',
            search: false,
          },
          { label: '供应商',
            prop: 'gysmc',
            minWidth: '0px',
            search: true,
          },
          { label: '质检单号',
            prop: 'zjdh',
            minWidth: '0px',
            search: true,
          },
          { label: 'ASN编号',
            prop: 'asnbh',
            minWidth: '0px',
            search: true,
          },
          { label: '创建时间',
            prop: 'cjsj',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 6);
            },
            search: true,
          },
          { label: '质检时间',
            prop: 'zjsj',
            minWidth: '0px',
            type: 'DateRange',
            search: true,
          },
          { label: '质检人',
            prop: 'zjr',
            minWidth: '0px',
            search: false,
          },
          { label: '任务状态',
            prop: 'show_ckrwzt',
            minWidth: '0px',
            search: true,
          },
          { label: '质检单状态',
            prop: 'show_zt',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '/wmsqualityinspectionlist/ckRwList',
        key: 'id',
        tableColumn: 6,
        muti: false,
      },
      tableSearch: {
        column:
          [
            { label: '质检方式',
              prop: 'zjsf',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品编号',
              prop: 'goodsbh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'goodsmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '包装名称',
              prop: 'bzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '单位名称',
              prop: 'dwmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货数量',
              prop: 'shsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '应检数量',
              prop: 'yjsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '样品数量',
              prop: 'ypsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '质检状态',
              prop: 'show_zt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次',
              prop: 'pc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'scrq',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              search: false } ],
        url: '/wmsqualityinspectionlistdetailed/list',
        key: 'id',
        tableColumn: 4,
      },
      formDialog: __form(),
      dialog: {
        title: '分配',
        wmsqualityinspectionlist: '',
        row: {},
        ryid: '',
      },
      dialogSearch: {
        title: '查看',
        row: {},
        size: 'large',
      },
      dialogClick: {
        title: '查看',
      },
      tableClick: {
        column:
          [
            { label: '库位名称',
              prop: 'kwmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '数量',
              prop: 'sl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
          ],
        option: {
          zjdmxid: '',
          lx: '',
        },
        url: '/wmsqualityhistory/list',
        key: 'id',
        tableColumn: 2,
        muti: false,
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (row) {
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_shelvesTask) {
              await this.USE('DICTIONARY_shelvesTask');
            }
          },
        ]);
        this.dialog.row = row;
        console.log('id:' + this.dialog.row.id);
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.formDialog.account === '0') {
          this.VALIDATE('formDialog', async option => {
            delete option.account;
            option.zjdid = this.dialog.row.id;
            try {
              await this.post('/wmsqualityinspectionlist/addZjckrw', option);
              this.dialogInit();
              this.tableWatch('table');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            delete option.account;
            option.zjdid = this.dialog.row.id;
            try {
              await this.post('/wmsqualityinspectionlist/addZjckrw', option);
              this.dialogInit();
              this.tableWatch('table');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      dialogSearchOpen (row) {
        this.dialogSearchOpen.row = row;
        if (this.dialogSearch.title === '查看') {
          this.tableSearch.url = '/wmsqualityinspectionlistdetailed/list/' + row.id;
          this.tableWatch('tableSearch');
        }
        this.dialogSearch.visible = true;
      },
      dialogClickOpen (row) {
        if (this.dialogClick.title === '查看') {
          this.tableClick.tableSetData = '/wmsqualityhistory/list';
          this.tableClick.option.lx = '0';
          this.tableClick.option.zjdmxid = row.id;
          this.tableWatch('tableClick');
        }
        this.dialogClick.visible = true;
      },
    },
    watch: {
      'formDialog.account': async function (account) {
        this.formDialog.ryid = '';
        if (account.length !== 0 && account === '0') {
          this.dialog.wmsqualityinspectionlist = await this.post('/wmsqualityinspectionlist/selectYh', {});
        }
        if (account.length !== 0 && account === '1') {
          let {contentList} = await this.post('/wmsqualityinspectionlist/selectPDADLByHz', {
          });
          this.dialog.wmsqualityinspectionlist = contentList;
        }
      },
    },
    mounted: async function () {
      this.tableWatch('table');
      if (!this.DICTIONARY_qualityOutOperationTask) {
        await this.USE('DICTIONARY_qualityOutOperationTask');
      }
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .qualityOutOperationTask{
    width: 88vw;
    float: left;
  }
</style>
